<template>
	<view>
		<view class="search">
			<u-search @search="Search" margin="0 20rpx" placeholder="请搜索需要的书籍" :showAction="false"></u-search>
		</view>
		<view class="screen">
			<view class="screen-item" @tap="show = true">
				<view>分类排序</view>
			</view>
			<view class="screen-item" @tap="xiaoliang">
				<view>销量最高</view>
			</view>
			<view class="screen-item">
				<picker mode="selector" :range="rangeList" range-key="name" @change="jiage">
					价格排序
				</picker>
			</view>
			<view class="screen-item">
				<view class="" @tap="newfa">
					最新发布
				</view>
			</view>
		</view>
		<view class="book-list" v-if="bookList.length != 0">
			<view class="book" @touchstart="touchstart" @touchend="touchend" v-for="(item,i) in bookList" :key="i"
				@longtap="del" @tap="Godetails(item)">
				<view class="book-img">
					<image :src="tool.img(item.zhuimages[0])" mode=""></image>
				</view>
				<view class="book-name">
					{{ item.name }}
				</view>
				<view class="book-idcr">
					<text v-for="(items,index) in item.gui" :key="index">
						{{ items.name }}
						<text v-if="index != item.gui.length - 1">，</text>
					</text>
				</view>
				<view class="book-footer">
					<view class="book-price">
						<view class="new-price">
							<text>￥</text>
							<text>{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<view class="empty-img">
				<image src="../../static/emptys.png" mode=""></image>
			</view>
			<view class="empty-name">
				暂无书籍
			</view>
		</view>
		<u-picker keyName="name" :show="show" ref="uPicker" :columns="typeList" @confirm="confirm"
			@change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import tool from '../../utils/tool.js'
	export default {
		data() {
			return {
				tool: tool,
				show: false,
				name: '',
				page: 1,
				pid: 0,
				order: '',
				rangeList: [{
						"name": "升序"
					},
					{
						"name": "降序"
					}
				],
				typeList: [
					[{
						"name": '全部',
						id: ''
					}],
					[{
						"name": '全部',
						id: ''
					}]
				],
				bookList: [],
				zstype_id: '',
			}
		},
		onLoad(options) {
			this.pid = options.pid
			this.GetList()
			this.GetType()
		},
		onPullDownRefresh() {
			this.page = 1
			this.GetList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page++
			this.GetList()
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				let pid = e.value[0].id
				this.GetTypeTwo(pid)
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.pid = this.typeList[0][e.indexs[0]].id
				let index = e.indexs[1]
				this.zstype_id = e.values[1][index].id
				this.GetList()
				this.show = false
			},
			Search(e) {
				this.name = e
				this.page = 1
				this.GetList()
			},
			xiaoliang() {
				this.order = ''
				this.page = 1
				this.GetList()
			},
			jiage(e) {
				this.page = 1
				let index = e.detail.value
				if (index == 0) {
					this.order = 'price asc'
				} else {
					this.order = 'price desc'
				}

				this.GetList()
			},
			newfa() {
				this.page = 1
				this.order = 'id desc'
				this.GetList()
			},
			typeChange(e) {
				let index = e.detail.value
				this.pid = this.typeList[index].id
				this.page = 1
				this.GetList()
			},
			GetType() { //获取一级分类
				this.$http.Post('zter/typeList', {
					pid: 0
				}, (result) => {
					let arr = []
					arr = result.data
					arr.unshift({
						id: 0,
						name: '全部'
					})
					this.typeList[0] = arr
				})
			},
			GetTypeTwo(pid) { //获取二级分类
				if (pid == '') {
					let arr = [{
						"name": "全部",
						"id": ''
					}]
					this.typeList[1] = arr
					this.$forceUpdate()
				} else {
					this.$http.Post('zter/typeList', {
						pid: pid
					}, (result) => {
						let arr = []
						arr = result.data
						this.typeList[1] = arr
						this.$forceUpdate()
					})
				}
			},
			GetList() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('zter/shopList', {
					pid: this.pid,
					page: this.page,
					order: this.order,
					name: this.name,
					zstype_id: this.zstype_id
				}, (result) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.bookList = []
					}
					this.bookList = this.bookList.concat(result.data.data)
				})
			},
			Godetails(item) {
				uni.navigateTo({
					url: '/pages/book/index?id=' + item.id
				})
			}
		}
	}
</script>

<style>
	.search {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.screen {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.screen-item {
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3c3c3c;
		font-size: 28rpx;
	}

	.book-list {
		margin: 20rpx auto;
		width: 94%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.book {
		margin-bottom: 20rpx;
		width: 48%;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.book-img {
		width: 100%;
		height: 320rpx;
	}

	.book-img>image {
		border-radius: 16rpx;
		width: 100%;
		height: 100%;
	}

	.book-name {
		margin: 20rpx 0 10rpx 0;
		padding: 0rpx 10rpx;
		font-weight: bold;
		font-size: 28rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.book-idcr {
		padding: 0rpx 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.book-footer {
		margin: 10rpx 0;
		padding: 0rpx 10rpx;
		display: flex;
	}

	.book-price {
		width: 50%;
		height: 100%;
	}

	.book-cart {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.book-cart>image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.new-price {
		width: 100%;
		height: 50%;
	}

	.new-price>text:nth-child(1) {
		font-size: 24rpx;
		color: #ff5502;
		font-weight: bold;
	}

	.new-price>text:nth-child(2) {
		font-size: 28rpx;
		color: #ff5502;
		font-weight: bold;
	}

	.old-price {
		width: 100%;
		height: 50%;
		text-decoration: line-through #999;
		font-size: 28rpx;
	}

	.old-price>text:nth-child(1) {
		color: #999;
	}

	.old-price>text:nth-child(2) {
		color: #999;
	}

	.empty-img {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty-img>image {
		width: 450rpx;
		height: 500rpx;

	}

	.empty-name {
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>